<template>
  <div class="network-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">网络发展规划流程</h2>
        <div class="process-status">
          <el-tag type="info">当前步骤：{{ currentStepInfo.title }}</el-tag>
          <el-tag type="warning" v-if="formData.priority === 'p0'">紧急规划</el-tag>
        </div>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info" shadow="hover">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>
                <i :class="currentStepInfo.icon"></i>
                {{ currentStepInfo.title }}
              </h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in currentStepInfo.formItems" 
                         :key="index"
                         :class="{ 'full-width': item.type === 'textarea' || item.type === 'upload' }">
                    <el-form-item :label="item.label"
                                :prop="item.prop"
                                :required="item.required"
                                :class="{ 'is-required': item.required }">
                      <el-input v-if="item.type === 'input'" 
                               v-model="formData[item.prop]"
                               :type="item.inputType || 'text'"
                               :placeholder="item.placeholder">
                        <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                      </el-input>
                      <el-select v-else-if="item.type === 'select'"
                                v-model="formData[item.prop]"
                                :placeholder="item.placeholder"
                                :multiple="item.multiple">
                        <el-option v-for="option in item.options"
                                 :key="option.value"
                                 :label="option.label"
                                 :value="option.value">
                        </el-option>
                      </el-select>
                      <el-date-picker v-else-if="item.type === 'date'"
                                    v-model="formData[item.prop]"
                                    :type="item.dateType || 'date'"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd">
                      </el-date-picker>
                      <el-input v-else-if="item.type === 'textarea'"
                               type="textarea"
                               v-model="formData[item.prop]"
                               :rows="item.rows || 4"
                               :placeholder="item.placeholder">
                      </el-input>
                      <el-upload v-else-if="item.type === 'upload'"
                                class="upload-demo"
                                action="#"
                                :auto-upload="false"
                                :on-change="handleFileChange"
                                :file-list="fileList">
                        <el-button size="small" type="primary">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>
                  <i class="el-icon-warning-outline"></i>
                  注意事项：
                </h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">
                    <i class="el-icon-check"></i>
                    {{ tip }}
                  </li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left"
                          size="medium">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed"
                          size="medium">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>

    <div class="process-progress">
      <div class="progress-info">
        <span>流程进度：</span>
        <el-progress :percentage="(currentStep + 1) / processSteps.length * 100" 
                    :format="format"
                    status="success"></el-progress>
      </div>
      <div class="step-count">
        <span>当前步骤：{{ currentStep + 1 }}/{{ processSteps.length }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NetworkPlanProcess',
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数量'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        planType: [{ required: true, message: '请选择规划类型', trigger: 'change' }],
        businessScenario: [{ required: true, message: '请选择业务场景', trigger: 'change' }],
        currentAnalysis: [{ required: true, message: '请填写现状分析', trigger: 'blur' }],
        requirements: [{ required: true, message: '请填写需求描述', trigger: 'blur' }],
        priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
        expectedGoals: [{ required: true, message: '请输入预期目标', trigger: 'blur' }],
        techRoute: [{ required: true, message: '请选择技术路线', trigger: 'change' }],
        architecture: [{ required: true, message: '请填写架构设计', trigger: 'blur' }],
        coreEquipment: [{ required: true, message: '请选择核心设备', trigger: 'change' }],
        performance: [{ required: true, message: '请填写性能指标', trigger: 'blur' }],
        security: [{ required: true, message: '请填写安全方案', trigger: 'blur' }],
        equipmentBudget: [
          { required: true, message: '请输入设备预算', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        softwareBudget: [
          { required: true, message: '请输入软件预算', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        implementBudget: [
          { required: true, message: '请输入实施预算', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        techTeam: [{ required: true, message: '请选择技术团队', trigger: 'change' }],
        startDate: [{ required: true, message: '请选择启动时间', trigger: 'change' }],
        duration: [
          { required: true, message: '请输入实施周期', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        riskAssessment: [{ required: true, message: '请填写风险评估', trigger: 'blur' }],
        implementStrategy: [{ required: true, message: '请选择实施策略', trigger: 'change' }],
        implementation: [{ required: true, message: '请填写实施步骤', trigger: 'blur' }],
        acceptanceCriteria: [{ required: true, message: '请填写验收标准', trigger: 'blur' }],
        contingency: [{ required: true, message: '请填写应急预案', trigger: 'blur' }],
        qualityControl: [{ required: true, message: '请选择质量控制措施', trigger: 'change' }]
      },
      processSteps: [
        {
          title: '需求分析',
          shortDesc: '分析网络需求',
          icon: 'el-icon-data-analysis',
          description: '分析网络发展需求和现状',
          formItems: [
            {
              type: 'select',
              label: '规划类型',
              prop: 'planType',
              placeholder: '请选择规划类型',
              required: true,
              options: [
                { label: '网络扩容', value: 'expansion' },
                { label: '技术升级', value: 'upgrade' },
                { label: '架构优化', value: 'optimization' },
                { label: '安全加固', value: 'security' }
              ]
            },
            {
              type: 'textarea',
              label: '现状分析',
              prop: 'currentAnalysis',
              placeholder: '请描述当前网络现状和问题',
              required: true,
              rows: 4
            },
            {
              type: 'textarea',
              label: '需求描述',
              prop: 'requirements',
              placeholder: '请详细描述网络发展需求',
              required: true,
              rows: 4
            },
            {
              type: 'select',
              label: '优先级',
              prop: 'priority',
              placeholder: '请选择优先级',
              options: [
                { label: '高优先级', value: 'high' },
                { label: '中优先级', value: 'medium' },
                { label: '低优先级', value: 'low' }
              ]
            },
            {
              type: 'upload',
              label: '需求文档',
              prop: 'requirementsDocs',
              tip: '请上传详细的需求分析文档'
            }
          ],
          tips: [
            '全面分析当前网络状况',
            '明确业务发展需求',
            '考虑未来扩展空间'
          ]
        },
        {
          title: '技术方案',
          shortDesc: '制定技术方案',
          icon: 'el-icon-cpu',
          description: '制定网络发展技术方案',
          formItems: [
            {
              type: 'select',
              label: '技术路线',
              prop: 'techRoute',
              placeholder: '请选择技术路线',
              multiple: true,
              options: [
                { label: '网络虚拟化', value: 'virtualization' },
                { label: 'SDN技术', value: 'sdn' },
                { label: '云网融合', value: 'cloud_network' },
                { label: '5G技术', value: '5g' }
              ]
            },
            {
              type: 'textarea',
              label: '方案描述',
              prop: 'solutionDesc',
              placeholder: '请详细描述技术方案内容',
              rows: 6
            },
            {
              type: 'select',
              label: '设备选型',
              prop: 'equipment',
              placeholder: '请选择设备类型',
              multiple: true,
              options: [
                { label: '核心交换机', value: 'core_switch' },
                { label: '路由器', value: 'router' },
                { label: '防火墙', value: 'firewall' },
                { label: '负载均衡', value: 'load_balancer' }
              ]
            },
            {
              type: 'upload',
              label: '网络拓扑',
              prop: 'topology',
              tip: '请上传网络拓扑图'
            }
          ],
          tips: [
            '方案要具有前瞻性',
            '考虑技术可行性',
            '注意设备兼容性'
          ]
        },
        {
          title: '资源评估',
          shortDesc: '评估资源需求',
          icon: 'el-icon-money',
          description: '评估实施所需资源',
          formItems: [
            {
              type: 'input',
              inputType: 'number',
              label: '预算金额',
              prop: 'budget',
              placeholder: '请输入预算金额',
              required: true,
              unit: '万元'
            },
            {
              type: 'select',
              label: '人员需求',
              prop: 'staffing',
              placeholder: '请选择所需人员',
              multiple: true,
              options: [
                { label: '网络工程师', value: 'network_engineer' },
                { label: '系统工程师', value: 'system_engineer' },
                { label: '安全工程师', value: 'security_engineer' },
                { label: '运维人员', value: 'operations' }
              ]
            },
            {
              type: 'date',
              label: '计划周期',
              prop: 'timeline',
              placeholder: '请选择计划完成时间'
            },
            {
              type: 'textarea',
              label: '风险评估',
              prop: 'riskAssessment',
              placeholder: '请评估实施风险',
              rows: 4
            }
          ],
          tips: [
            '预算要合理可控',
            '人员配置要适当',
            '评估实施风险'
          ]
        },
        {
          title: '实施计划',
          shortDesc: '制定实施计划',
          icon: 'el-icon-time',
          description: '制定详细的实施计划',
          formItems: [
            {
              type: 'textarea',
              label: '实施步骤',
              prop: 'implementation',
              placeholder: '请详细描述实施步骤',
              required: true,
              rows: 6
            },
            {
              type: 'select',
              label: '实施方式',
              prop: 'implementMethod',
              placeholder: '请选择实施方式',
              options: [
                { label: '分阶段实施', value: 'phased' },
                { label: '整体切换', value: 'complete' },
                { label: '并行运行', value: 'parallel' }
              ]
            },
            {
              type: 'textarea',
              label: '应急预案',
              prop: 'contingency',
              placeholder: '请制定应急预案',
              rows: 4
            },
            {
              type: 'upload',
              label: '实施文档',
              prop: 'implementDocs',
              tip: '请上传详细的实施计划文档'
            }
          ],
          tips: [
            '步骤要详细可执行',
            '预留充足实施时间',
            '准备完善应急预案'
          ]
        },
        {
          title: '审批流程',
          shortDesc: '方案审批',
          icon: 'el-icon-s-check',
          description: '网络发展规划方案审批',
          formItems: [
            {
              type: 'select',
              label: '审批人',
              prop: 'approvers',
              placeholder: '请选择审批人',
              required: true,
              multiple: true,
              options: [
                { label: '技术总监', value: 'tech_director' },
                { label: '运维总监', value: 'ops_director' },
                { label: '信息安全负责人', value: 'security_manager' },
                { label: 'CTO', value: 'cto' }
              ]
            },
            {
              type: 'select',
              label: '审批顺序',
              prop: 'approvalOrder',
              placeholder: '请选择审批顺序',
              required: true,
              options: [
                { label: '并行审批', value: 'parallel' },
                { label: '顺序审批', value: 'sequential' }
              ]
            },
            {
              type: 'textarea',
              label: '补充说明',
              prop: 'additionalInfo',
              placeholder: '请输入补充说明信息',
              rows: 4
            }
          ],
          tips: [
            '选择合适的审批人',
            '准备完整的方案文档',
            '及时跟进审批进度'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    },
    format(percentage) {
      return percentage === 100 ? '完成' : `${percentage}%`
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        this.$message.error('请正确填写所有必填项')
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('网络发展规划流程已完成')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      const isValidFormat = (file.name.endsWith('.jpg') || 
                           file.name.endsWith('.png') || 
                           file.name.endsWith('.pdf') || 
                           file.name.endsWith('.doc') || 
                           file.name.endsWith('.docx'))
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isValidFormat) {
        this.$message.error('文件格式不正确！')
        return false
      }
      if (!isLt5M) {
        this.$message.error('文件大小不能超过 5MB！')
        return false
      }
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.network-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
          font-size: 16px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        font-weight: 600;
      }

      .process-status {
        margin-top: 10px;
        
        .el-tag {
          margin: 0 5px;
        }
      }
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);

    .el-steps {
      margin-bottom: 40px;
      padding: 0 20px;
    }
  }

  .process-content {
    .current-step-info {
      .step-header {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebeef5;

        h3 {
          color: #303133;
          margin-bottom: 10px;
          font-size: 20px;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            margin-right: 10px;
            color: #409EFF;
          }
        }

        .description {
          color: #606266;
          font-size: 14px;
          margin: 0;
        }
      }

      .step-form {
        padding: 20px;
        background: #f8f9fa;
        border-radius: 4px;

        .el-form-item {
          margin-bottom: 22px;

          &.full-width {
            width: 100%;
          }
        }

        .el-select {
          width: 100%;
        }
      }

      .step-tips {
        margin: 30px auto;
        padding: 20px;
        background: #fdf6ec;
        border-radius: 4px;
        max-width: 800px;
        
        h4 {
          color: #e6a23c;
          margin: 0 0 15px;
          font-size: 16px;
          display: flex;
          align-items: center;

          i {
            margin-right: 8px;
          }
        }

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          
          li {
            color: #666;
            margin-bottom: 8px;
            display: flex;
            align-items: center;

            i {
              color: #67c23a;
              margin-right: 8px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .button-group {
        text-align: center;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #ebeef5;

        .el-button {
          margin: 0 10px;
          padding: 12px 25px;
          font-size: 14px;

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }

  .process-progress {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .progress-info {
      flex: 1;
      margin-right: 20px;
      display: flex;
      align-items: center;

      span {
        margin-right: 10px;
        color: #606266;
      }

      .el-progress {
        width: 100%;
        max-width: 300px;
      }
    }

    .step-count {
      color: #606266;
      font-size: 14px;
    }
  }
}

:deep(.el-step__icon) {
  cursor: pointer;
  
  &.is-text {
    border-color: #409EFF;
    
    .el-step__icon-inner {
      color: #409EFF;
    }
  }
}

:deep(.el-step__title) {
  font-size: 14px;
  
  &.is-process {
    font-weight: 600;
    color: #409EFF;
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__inner) {
  &:hover, &:focus {
    border-color: #409EFF;
  }
}
</style> 